<template>
  <div>
    <van-nav-bar title="网易严选" left-arrow>
      <template #left>
        <van-icon name="home-o" size="20" @click="toIndex" />
      </template>
      <template #right>
        <van-icon name="search" size="20" @click="toSearch" />
        <van-icon name="shopping-cart-o" size="20" @click="toShopcart" />
      </template>
    </van-nav-bar>
    <van-address-list v-model="chosenAddressId" :list="address" default-tag-text="默认" @edit="onEdit"
      v-if="showState === 1" />
    <van-coupon-cell />

    <div v-for="(goods, index) in orderList?.detailArrayList" :key="index">
      <van-card :num="goods.skuNum" :price="goods.orderPrice" :title="goods.skuName" :thumb="goods.imgUrl" />
    </div>

    <div>
      <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import router from "@/router";

export default defineComponent({
  name: "Category",
});
</script>
<script lang="ts" setup>
import cartApi from "@/api/cartList";
import type { UserAddressData } from "@/api/cartList";
import { ref, onMounted, computed, nextTick } from "vue";
import { shopDataStore } from "@/stores/shopcart";
import { storeToRefs } from "pinia";

const shopStore = shopDataStore();
const { shopList, orderList } = storeToRefs(shopStore);
// const shopList = (shopStoreshopList?.shopList || []).filter(item=>item.isChecked);
// const shopList1 = orderList.value

const chosenAddressId = ref("1");
const showState = ref(1);

const address = ref<UserAddressData[]>([]);
const getAddress = async () => {
  const res = await cartApi.getUserAddress();
  // console.log(res);

  address.value = res;
  const obj = JSON.parse(localStorage.getItem("address") as any);
  // console.log(obj, "___________");
  if (obj === null) return;
  address.value.push(obj as any);
  // console.log(res);
};

onMounted(async () => {
  shopStore.getShopList();
  getAddress();
  // await shopStore.reqTradeInfo()
  // shopStore.reqSubmitOrder()
});
//计算总价
const total = computed(() => {
  let total = 0;
  shopList.value.forEach((item) => {
    if (item.isChecked === 1) {
      total += item.skuNum * item.skuPrice * 100;
    }
  });
  return total;
});

const onEdit = (item: any, index: number) => {
  router.push({
    name: "addOrSet",
  });
};

//去首页
const toIndex = () => {
  router.push({
    name: "index",
  });
};

const toSearch = () => {
  router.push({
    name: "search",
  });
};

const toShopcart = () => {
  router.push({
    name: "shopCart",
  });
};
const onSubmit = async () => {
  const orderDetailList = orderList.value.detailArrayList;
  const params = {
    tradeNo: orderList.value.tradeNo,
    consignee: address.value[0].name,
    consigneeTel: address.value[0].tel,
    deliveryAddress: address.value[0].address,
    paymentWay: "ONLINE",
    orderComment: "",
    orderDetailList: orderList.value.detailArrayList,
  };
  try {
    const res = await cartApi.reqSubmitOrder(params);
    console.log(res);
    router.push(`/cart/pay?payId=${res}`);
  } catch (error) { }
};
</script>

<style lang="less" scoped>
HEAD:deep(.van-address-list) {
  padding-bottom: 12px;
}

:deep(.van-address-list) {
  padding-bottom: 12px;
}

:deep(.van-address-list__bottom) {
  z-index: -999;
}
</style>
